<template>
  <div class="studentDetails">
    <el-card>
      <!-- <h2 v-if="pageType == 'create'">添加学员合同</h2>
            <h2 v-if="pageType == 'edit'">编辑学员合同</h2>
            <h2 v-if="pageType == 'details'">学员合同详情</h2> -->

      <el-form ref="form" :model="formData" :rules="rules" label-width="90px">
        <div class="form_wrap">
          <h4>基础信息</h4>
          <hr />
          <div class="form_content">
            <el-form-item label="学号" prop="sno" v-if="pageType != 'create'">
              <el-input
                v-model="formData.sno"
                style="width: 218px;"
                placeholder="请填写学号"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="name">
              <el-input
                v-model="formData.name"
                placeholder="请填写姓名"
                style="width: 218px;"
              ></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input
                v-model="formData.email"
                placeholder="请填写邮箱"
                style="width: 218px;"
                @change="verifyCommonUnique('email')"
              ></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="mobile">
              <el-input
                v-model="formData.mobile"
                maxlength="11"
                placeholder="请填写手机号"
                style="width: 218px;"
              ></el-input>
            </el-form-item>
            <el-form-item label="头像">
              <template slot-scope="scope">
                <div class="avatar_wrap">
                  <el-upload
                    :class="{ 'avatar-uploader': !imageUrl }"
                    style="height: 40px;"
                    :action="uploadFileURL"
                    accept="image/jpeg,image/gif,image/png"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                  >
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </div>
              </template>
            </el-form-item>

            <el-form-item label="性别" prop="sex">
              <el-select v-model="formData.sex" placeholder="请选择性别">
                <el-option
                  v-for="item in sexData"
                  :key="item.value"
                  :label="item.label"
                  :value="parseInt(item.value)"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="意向" prop="intention">
              <el-input
                v-model="formData.intention"
                placeholder="请填写意向"
                style="width: 218px;"
              ></el-input>
            </el-form-item>
            <el-form-item label="出生日期" prop="birthday">
              <el-date-picker
                v-model="formData.birthday"
                type="date"
                placeholder="选择出生日期"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="英文名" prop="enname">
              <el-input
                v-model="formData.enname"
                placeholder="请填写英文名"
                style="width: 218px;"
              ></el-input>
            </el-form-item>
            <el-form-item label="负责人" prop="teacher_id">
              <el-select
                v-model="formData.teacher_id"
                placeholder="请选择负责人"
              >
                <el-option
                  v-for="item in teacherList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="助教" prop="tutor_id">
              <el-select v-model="formData.tutor_id" placeholder="请选择助教">
                <el-option
                  v-for="item in teacherList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="报名渠道" prop="source">
              <!-- <el-input v-model="formData.source"></el-input> -->
              <el-select v-model="formData.source" placeholder="请选择报名渠道">
                <el-option
                  v-for="item in sourceData"
                  :key="item.value"
                  :label="item.label"
                  :value="parseInt(item.value)"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="创建时间" v-if="pageType != 'create'">
              <el-date-picker
                v-model="formData.create_time"
                type="datetime"
                placeholder="请选择创建时间"
                disabled
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="更新时间" v-if="pageType != 'create'">
              <el-date-picker
                v-model="formData.update_time"
                type="datetime"
                placeholder="请选择更新时间"
                disabled
              ></el-date-picker>
            </el-form-item>
          </div>
        </div>
        <link-details
          :moduleData="moduleData"
          :formData="formData"
          @changeFormData="changeFormData"
        ></link-details>
      </el-form>
      <el-form label-width="90px">
        <el-form-item>
          <el-button @click="handleCancle">取消</el-button>
          <el-button type="primary" @click="handleSubmit('studentManage')"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { changeTitleMinin, detailsMinin } from "@/mixin";
import { uploadFileURL } from "@/utils/url";
import http from "@/api/student";
import globalApi from "@/api/global";
import { formatArray } from "@/utils";
import details from "@/components/details";

export default {
  name: "studentDetails",
  mixins: [changeTitleMinin, detailsMinin],
  components: {
    linkDetails: details
  },
  data() {
    return {
      imageUrl: "",
      dialogImageUrl: "",
      dialogVisible: false,
      sourceData: [],
      sexData: [],
      teacherList: [],
      rules: {
        name: [{ required: true, message: "请填写姓名" }],
        mobile: [
          { required: true, message: "请填写手机号" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "手机号填写有误",
            trigger: "blur"
          }
        ],
        email: [
          { required: true, message: "请填写邮箱" },
          {
            pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
            message: "邮箱填写有误",
            trigger: "blur"
          }
        ],
        birthday: [{ required: true, message: "请选择出生日期" }],
        source: [{ required: true, message: "请选择报名渠道" }]
      },
      http: http,
      imageUrl: null,
      uploadFileURL
    };
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.formData["headimgurl"] = res.data;
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isPicture =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/gif";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isPicture) {
        this.$message.error("上传头像图片只能是图片格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isPicture && isLt2M;
    },
    verifyCommonUnique(type) {
      let data = {};
      data[type] = this.formData[type];
      globalApi.verifyCommonUnique(data, "student").then(res => {
        // 调用主动验证
        // valid: false 为验证失败，已存在
      });
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    getTeacher() {
      http.getTeacher().then(res => {
        console.log("getTeacherList:", res);
        this.teacherList = res.data;
      });
    },
    init() {
      let basicConfig = JSON.parse(sessionStorage.getItem("basicConfig"));
      console.log("basicConfig:", basicConfig);

      let sourceData = [];
      let keysData = Object.keys(basicConfig.source);
      if (keysData.length) {
        keysData.map(item => {
          sourceData.push({ value: item, label: basicConfig.source[item].a });
        });
        //console.log('sourceData:',sourceData);
        this.sourceData = sourceData;
      }

      this.sexData = formatArray(basicConfig.sex);

      this.getPageParams("studentDetailsParams", () => {
        this.getCommonModuleFields("student");
      });
    }
  },
  created() {
    this.getTeacher();
    this.init();
  }
};
</script>

<style lang="scss" scoped>
.studentDetails {
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  overflow: auto;
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    cursor: pointer;
    background: #f1f1f1;
  }

  &::-moz-scrollbar {
    display: none;
  }
  &::-ms-scrollbar {
    display: none;
  }
  &::-o-scrollbar {
    display: none;
  }

  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    width: 10px;
    cursor: pointer;
    background: #bbb;
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    border-radius: 0px;
    background: #f1f1f1;
  }

  .form_wrap {
    margin-bottom: 10px;
    h4 {
      margin: 10px 0px;
    }
    hr {
      margin-bottom: 10px;
    }
    .form_content {
      display: flex;
      flex-wrap: wrap;
    }
  }
}
</style>

<style lang="scss">
.studentDetails {
  .avatar_wrap {
    width: 218px;
    height: 100%;
    .avatar {
      border-radius: 100%;
      width: 40px;
      height: 40px;
      cursor: pointer;
    }

    .avatar-uploader .el-upload {
      height: 40px;
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409eff;
    }
    .el-upload--text {
      height: 100%;
    }
    .avatar-uploader-icon {
      font-size: 16px;
      color: #8c939d;
      width: 40px;
      height: 40px;
      line-height: 40px;
      text-align: center;
    }
  }
}
</style>
